<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/ionicons/css/ionicons.min.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/iCheck/square/blue.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/morris/morris.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/jvectormap/jquery-jvectormap-1.2.2.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/datepicker/datepicker3.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/daterangepicker/daterangepicker.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/datatables/dataTables.bootstrap.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/treeTable/jquery.treetable.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/treeTable/jquery.treetable.theme.default.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/select2/select2.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/colorpicker/bootstrap-colorpicker.min.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/bootstrap-markdown/css/bootstrap-markdown.min.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/adminLTE/css/AdminLTE.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/adminLTE/css/skins/_all-skins.min.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/css/style.css">
<link rel="stylesheet"
	href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script
	src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/web-car.css">

<script type="text/javascript">
var total =[];
</script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>好好鲜花店-网上鲜花店十大排名,本地鲜花店配送,花店专注鲜花预定/网上送花服务</title>
</head>
<body>
	<div class="right">
		<div class="top">
			<span class="glyphicon glyphicon-home icon"></span> <span>你好，欢迎来到好好鲜花店，中国网上花店领先品牌！</span>
			<div class="top-right">
			<c:if test='${user == null}'><a href="${pageContext.request.contextPath}/pages/web-register.jsp">注册</a> | 
										<a href="${pageContext.request.contextPath}/pages/web-login.jsp">登录</a> </c:if>
			<c:if test='${user != null}'><a>欢迎你，${user.username}</a><a id="user_input">${user.id}</a>  | <a href="${pageContext.request.contextPath}/web/index">注销</a> 
		
			</c:if>	 
			</div>
			
		</div>
		<div>
			<img src="${pageContext.request.contextPath}/images/top.png" class="img-responsive">
		</div>
		<div class="logo-search">
			<div class="logo">
				<a><img src="${pageContext.request.contextPath}/images/logo.png" class="img-responsive" /></a>
			</div>
		</div>
		<div class="content">
			<!-- 数据表格 -->
						<div class="table-box">
							<!--数据列表-->
							<table id="dataList"
								class="table table-bordered table-striped table-hover dataTable">
								<thead>
									<tr>
										<th class="" style="padding-right: 0px">
										<input id="selall" type="checkbox" class="icheckbox_square-blue">
										</th>
										<th class="text-center">商品</th>
										<th class="text-center">单价(元)</th>
										<th class="text-center ">数量</th>
										<th class="text-center ">库存</th>
										<th class="text-center ">小计(元)</th>
										<th class="text-center">操作</th>
									</tr>
								</thead>
								<tbody>

									<c:forEach items="${flowerlist}" var="f">
										<tr>
									<td><input name="ids" type="checkbox" class=" ids" data-value="${f.id}" data-quantity=1></td>

									<td><img src="../img/flower/${f.photo}" width="50" height="50">${f.flowername }</td>
									<td>${f.price }</td>
									
									<td>
										<input type="text" class="spinner" value="1" id="quantity"/>
										<script>
										var length = total.push(${f.total});
										// console.log(length);
										 //数组push之后返回的是length,而不是新的数组，如果不清楚这点，在使用过程中回遇到很大的坑。
											
										 </script>
									</td>
									<td>${f.total}</td>
									<td></td>
									<td class="text-center">
										<a href="${pageContext.request.contextPath}/delete/car?flowersId=${f.id}&userId=${userId}" class="btn bg-olive btn-xs">删除</a>
									</td>
								</tr>
									</c:forEach>
									<tr><td colspan="4">商品总价（不含运费）<span class="sum" id="sum">0.00</span>元</td>
										<td colspan="3"><button class="next" onclick="next()">下一步，填写核对购物信息</button></td>
									</tr>
								</tbody>
                        
							</table>
							
							<!--数据列表/-->

						</div>
						<!-- 数据表格 /-->

					</div>
		</div>
	</div>
		<div class="left">	
		</div>
</body>

	<script
		src="${pageContext.request.contextPath}/plugins/jQuery/jquery-2.2.3.min.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/jQueryUI/jquery-ui.min.js"></script>
	<script>
		$.widget.bridge('uibutton', $.ui.button);
	</script>
	<script
		src="${pageContext.request.contextPath}/plugins/bootstrap/js/bootstrap.min.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/raphael/raphael-min.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/morris/morris.min.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/sparkline/jquery.sparkline.min.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/knob/jquery.knob.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/daterangepicker/moment.min.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/daterangepicker/daterangepicker.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/daterangepicker/daterangepicker.zh-CN.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/datepicker/bootstrap-datepicker.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/datepicker/locales/bootstrap-datepicker.zh-CN.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/slimScroll/jquery.slimscroll.min.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/fastclick/fastclick.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/iCheck/icheck.min.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/adminLTE/js/app.min.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/treeTable/jquery.treetable.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/select2/select2.full.min.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/colorpicker/bootstrap-colorpicker.min.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/bootstrap-wysihtml5/bootstrap-wysihtml5.zh-CN.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/bootstrap-markdown/js/bootstrap-markdown.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/bootstrap-markdown/locale/bootstrap-markdown.zh.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/bootstrap-markdown/js/markdown.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/bootstrap-markdown/js/to-markdown.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/ckeditor/ckeditor.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/input-mask/jquery.inputmask.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/input-mask/jquery.inputmask.date.extensions.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/input-mask/jquery.inputmask.extensions.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/datatables/jquery.dataTables.min.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/datatables/dataTables.bootstrap.min.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/chartjs/Chart.min.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/flot/jquery.flot.min.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/flot/jquery.flot.resize.min.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/flot/jquery.flot.pie.min.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/flot/jquery.flot.categories.min.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/ionslider/ion.rangeSlider.min.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/bootstrap-slider/bootstrap-slider.js"></script>
	<script>
		$(document).ready(function() {
			$("#user_input").hide();
			// 选择框
			$(".select2").select2();
			// WYSIHTML5编辑器
			$(".textarea").wysihtml5({
				locale : 'zh-CN'
			});
			//调用jquery ui来实现数字加减的功能了
			$('.spinner').each(function (i){
				$(this).spinner({
					max:total[i],
					min:1,
					step:1
				});	
				   //i就是索引值
				   //this 表示获取遍历每一个dom对象
			});
			
			//小计
			$('tr').each(function (i){
				//初始化页面数据	
				var price = $(this).children('td:eq(2)').text();
				var quantity = $(this).find('#quantity').val();
				
				 $(this).children('td:eq(5)').html(quantity*price);				 
				 if(!isNaN(quantity*price)){
					 var checkbox = $(".ids")[i-1];
					 $(checkbox).attr('value',(quantity*price));
				 }
				 //变化后的值
				 var tr= this;
				$(this).children('td:eq(3)').find('a').click(function() {  
					 quantity = $(tr).find('#quantity').attr("aria-valuenow");
					 $(tr).children('td:eq(5)').html(quantity*price);	
					 
					 if(!isNaN(quantity*price)){
						 var checkbox = $(".ids")[i-1];
						 $(checkbox).attr('value',(quantity*price));
					 }
				});
			});
			
			//总金额	
			setInterval(function(){
				var sum=0;
		        for(var i = 0; i<$(".ids").length; i++){
		            var checkbox = $(".ids")[i];
		            if(checkbox.checked){
		            	var a=parseInt($(checkbox).attr('value'));
		                sum=sum+a;
		            }
		        }
		        $('#sum').html(sum+".00");
		    },200);
			
		});
		
		
		function next(){
			var ids=[];
			//购买数量
			var quantitys=[];
			for(var i = 0; i<$(".ids").length; i++){
	            var checkbox = $(".ids")[i];
	            var tr = $('tr')[i+1];
	            if(checkbox.checked){
	            	ids.push($(checkbox).data('value'));
	            	var quantity = $(tr).find('#quantity').attr("aria-valuenow");
	            	$(checkbox).data('quantity',quantity);
	            	quantitys.push($(checkbox).data('quantity'));
	            }
	        }
			var userId=$('#user_input').html();
			$.post("${pageContext.request.contextPath}/next/car",{"ids":ids.join(",")},function(data){
				if (data.state) {
					console.log("success");
					var _list = data.listFlower;
					window.location.href = "${pageContext.request.contextPath}/buy/flower?listFlower="+JSON.stringify(_list)+"&userId="+userId+"&quantitys="+quantitys;
				}else{
					alert("请选择购买的商品！");
				}
			});
		}

		// 设置激活菜单
		function setSidebarActive(tagUri) {
			var liObj = $("#" + tagUri);
			if (liObj.length > 0) {
				liObj.parent().parent().addClass("active");
				liObj.addClass("active");
			}
		}

		$(document)
		.ready(
				function() {

					// 激活导航位置
					setSidebarActive("admin-datalist");

					// 列表按钮 
					$("#dataList td input[type='checkbox']")
							.iCheck(
									{
										checkboxClass : 'icheckbox_square-blue',
										increaseArea : '20%'
									});
					// 全选操作 
					$("#selall")
							.click(
									function() {
										var clicks = $(this).is(
												':checked');
										if (!clicks) {
											$(
													"#dataList td input[type='checkbox']")
													.iCheck(
															"uncheck");
										} else {
											$(
													"#dataList td input[type='checkbox']")
													.iCheck("check");
										}
										$(this).data("clicks",
												!clicks);
									});
				});
	</script>
</html>